@import 'BEM.scss';

// 清除浮动
@mixin clearfix {
	&:after {
		content: '';
		display: table;
		clear: both;
	}
}

// 单行位置省略号， `$substract`单位为%
@mixin ellipsis($substract: 0) {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100% - $substract;
}

// 圆角
@mixin rounded($radius) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	border-radius: $radius;
}

// 阴影
@mixin shadow($x, $y, $blur, $color) {
	-webkit-box-shadow: $x $y $blur $color;
	-moz-box-shadow: $x $y $blur $color;
	box-shadow: $x $y $blur $color;
}

// 内阴影
@mixin shadow-inset($x, $y, $blur, $color) {
	-webkit-box-shadow: inset $x $y $blur $color;
	-moz-box-shadow: inset $x $y $blur $color;
	box-shadow: inset $x $y $blur $color;
}

// 过渡动画
@mixin transition($property) {
	-webkit-transition: $property 0.2s ease;
	-moz-transition: $property 0.2s ease;
	-o-transition: $property 0.2s ease;
	transition: $property 0.2s ease;
}

@mixin box-sizing {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

// 线性渐变背景色
@mixin linear-gradient($direction, $from, $to) {
	background-color: $to;
	background-image: linear-gradient($direction, $from, $to);
}

@mixin linear-gradient-text($direction, $from, $to) {
	background-image: linear-gradient($direction, $from, $to);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Scrollbar
 -------------------------- */
@mixin scroll-bar($width: 8px, $color: rgba(0, 0, 0, 0.3)) {
	::-webkit-scrollbar {
		width: $width;

		&:horizontal {
			height: $width;
		}

		&-thumb {
			border-radius: calc($width/2);
			background-color: $color;
		}

		&-track {
			background-color: transparent;
		}
	}
}
